<template>
    <div class="flex flex-1 flex-col overflow-hidden">
        <div class="flex items-center px-4 py-2 border-b border-br-light">
            <span class="mr-2 font-bold text-tx-regular">图片组件</span>
        </div>
        <el-scrollbar>
            <div class="px-4 p-2">
                <div class="border-b border-dashed border-br mb-4">
                    <el-form-item label="标题名称">
                        <el-input v-model="diyData.config.title" />
                    </el-form-item>
                    <el-form-item label="简介描述">
                        <el-input v-model="diyData.config.intro" type="textarea" :rows="4" />
                    </el-form-item>
                    <el-form-item label="内顶距离">
                        <el-slider v-model="diyData.config.paddingTop" :max="300" />
                    </el-form-item>
                    <el-form-item label="内底距离">
                        <el-slider v-model="diyData.config.paddingBottom" :max="300" />
                    </el-form-item>
                    <el-form-item label="外顶距离">
                        <el-slider v-model="diyData.config.marginTop" :max="300" />
                    </el-form-item>
                    <el-form-item label="外底距离">
                        <el-slider v-model="diyData.config.marginBottom" :max="300" />
                    </el-form-item>
                    <el-form-item label="标头底距">
                        <el-slider v-model="diyData.config.headerBottom" :max="300" />
                    </el-form-item>
                    <el-form-item label="渐变角度">
                        <el-slider v-model="diyData.config.bgEdg" :max="360" />
                    </el-form-item>
                    <el-form-item label="背景颜色">
                        <div class="flex items-center gap-3">
                            <el-color-picker v-model="diyData.config.bgColorOne" color-format="hex" show-alpha />
                            <el-color-picker v-model="diyData.config.bgColorTow" color-format="hex" show-alpha />
                            <el-color-picker v-model="diyData.config.bgColorThree" color-format="hex" show-alpha />
                        </div>
                    </el-form-item>
                    <el-form-item label="标题颜色">
                        <el-color-picker v-model="diyData.config.titleColor" color-format="hex" show-alpha />
                    </el-form-item>
                    <el-form-item label="简介颜色">
                        <el-color-picker v-model="diyData.config.introColor" color-format="hex" show-alpha />
                    </el-form-item>
                </div>

                <div>
                    <div
                        v-for="(element, index) in diyData.data"
                        :key="index"
                        class="w-full p-4 pt-2 mb-3 rounded bg-page"
                    >
                        <el-form-item label="模块图片">
                            <material-picker
                                v-model="element.url"
                                :exclude-domain="true"
                                upload-class="bg-body"
                                size="60px"
                            >
                                <template #upload>
                                    <div class="upload-btn w-[70px] h-[70px]">
                                        <icon name="el-icon-Plus" :size="16" />
                                        <span class="text-xs leading-5">选择</span>
                                    </div>
                                </template>
                            </material-picker>
                        </el-form-item>
                        <el-form-item label="背景颜色">
                            <el-color-picker v-model="element.bgColor" color-format="hex" show-alpha />
                        </el-form-item>
                        <el-form-item label="内边距离">
                            <el-slider v-model="element.padding" :max="300" />
                        </el-form-item>
                        <el-form-item label="边框圆角">
                            <el-slider v-model="element.brRadius" :max="100" />
                        </el-form-item>
                    </div>
                </div>

                <div v-if="diyData.data.length <= 0">
                    <el-empty description="暂无数据" />
                </div>
            </div>
        </el-scrollbar>
    </div>
</template>

<script setup lang="ts">
import type { ImagesConfigType, ImagesDataType } from '../index.ts'

const props = defineProps({
    modelValue: {
        type: Object,
        default: () => ({
            config: {} as ImagesConfigType,
            data: [] as ImagesDataType[]
        })
    }
})

const emits = defineEmits<{
    (event: 'update:modelValue', value: any): void
}>()

// 装修数据
const diyData = computed({
    get() {
        return props.modelValue
    },
    set() {
        emits('update:modelValue', props.modelValue)
    }
})
</script>
